<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>订单工序</title>
    <meta name="description" content="A simple process flow or SCADA diagram editor, simulating equipment monitoring and control." />
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script>
    <script src="./assets/js/go-debug.js"></script>
</head>
<body >

<div class="buttonGroup loading" hidden>
    <button class="v-btn info" data-index="v-show">显示跳过工序</button>
    <button class="v-btn info" data-index="big"><img src="assets/img/zoomin.png" /></button>
    <button class="v-btn info" data-index="small"><img src="assets/img/zoomout.png" /></button>
    <select id="theme">
        <option value="default">default</option>
        <option value="temp1">temp1</option>
        <option value="temp2">temp2</option>
        <option value="temp3">temp3</option>
    </select>
</div>

<div class="radmenu" id="contextMenu loading" hidden>
    <a href="#" class="selected">编辑</a>
    <ul>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
        <li><a href="#">Menu 5</a></li>
    </ul>
</div>

<div id="sample">
    <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:100%;"></div>
</div>

<script src="./assets/js/require.js" charset="utf-8"></script>
<script>

    require.config({
        baseUrl:"./assets/",
        urlArgs:function(url,moduleName){
            return Math.random(); // "1.0.1"; //
        },
        shim: {
            "js/order": {
                deps:["js/view"]
            }
        },
        map: {
            '*': {
                '$css': 'js/require.css'
            }
        }
    });

    require([
        "js/order",
        "js/dialog",
        "$css!css/index"
    ],function(){
        $(".loading").removeAttr("hidden");
        $("body").on('click','[data-index]',function(e){
            var type = e.target.getAttribute("data-index");
            Dialog.hideMenu();
            if(!type){
                type = e.target.parentElement.getAttribute("data-index");
            }
            switch (type){
                case "v-show":{
                    e.target.innerHTML = "隐藏跳过工序";
                    e.target.setAttribute("data-index","v-hide");
                    myDiagram.startTransaction();
                    var data = JSON.parse(myDiagram.model.toJSON());
                    data.nodeDataArray.forEach(function(v){
                        if(!v.odid){
                            v.visible = true;
                        }
                    });
                    myDiagram.model.nodeDataArray = data.nodeDataArray;
                    myDiagram.commitTransaction();
                }
                    break;
                case "v-hide":{
                    e.target.innerHTML = "显示跳过工序";
                    e.target.setAttribute("data-index","v-show");
                    myDiagram.startTransaction();
                    var data = JSON.parse(myDiagram.model.toJSON());
                    data.nodeDataArray.forEach(function(v){
                        if(!v.odid){
                            v.visible = false;
                        }
                    });
                    myDiagram.model.nodeDataArray = data.nodeDataArray;
                    myDiagram.commitTransaction();
                }
                    break;
                case "big":{
                    myDiagram.scale += 0.1;
                }
                    break;
                case "small":{
                    if(myDiagram.scale>0.15){
                        myDiagram.scale -= 0.1;
                    }
                }
                    break;
                case "save":{
                    $.API.save();
                }
                    break;
                default:
                    break;
            }
        })

        $("#theme").on("change",'',function(){
            $.API.theme(this.value);
        })

        $(function(){
            $.API.init();
            $.API.load();
        })
    })
</script>
</body>
</html>
